<template>
  <div class="container">
    <el-card>
      <!-- 头部区域 -->
      <div class="btnNew">
        <el-button
          icon="el-icon-edit"
          type="success"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>

      <question-select @onSearch="search"></question-select>

      <!-- 主体区域 -->
      <div>
        <el-alert type="info" show-icon :closable="false">
          <span slot="title">数据一共{{ total }}条</span>
        </el-alert>
      </div>

      <!-- 表格区域 -->
      <el-table :data="questionList">
        <el-table-column label="试题编号" prop="number" />
        <el-table-column label="学科" prop="subject" width="80px" />
        <el-table-column label="目录" prop="catalog" width="120px" />
        <el-table-column label="题型" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" >
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-else-if="scope.row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              size="mini"
              plain
              @click="SubjectShow(scope.row, scope.row.id)"
            />
            <!-- 跳转试题录入页面 -->
            <el-button
              type="success"
              icon="el-icon-edit"
              plain
              circle
              size="mini"
              @click="goNew(scope.row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              size="mini"
              @click="deletequestion(scope.row.id)"
            />
            <!-- 加入精品 -->
            <el-button
              type="warning"
              icon="el-icon-check"
              plain
              circle
              size="mini"
              @click="addSelect(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[3, 5, 7]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </el-card>

    <!-- 题目预览 -->
    <el-dialog
      title="题目预览"
      :visible.sync="isSubjectShow"
      width="50%"
      @close="isSubjectShowClosed"
    >
      <!-- 题目预览主体 -->
      <el-row :gutter="20">
        <el-col :span="6">
          【题型】：
          <span v-if="Subject.questionType == 1">单选</span>
          <span v-else-if="Subject.questionType == 2">多选</span>
          <span v-else>简答</span>
        </el-col>
        <el-col :span="6">【编号】：{{ Subject.id }}</el-col>
        <el-col :span="6">
          【难度】：
          <span v-if="Subject.difficulty == 1">简单</span>
          <span v-else-if="Subject.difficulty == 2">一般</span>
          <span v-else>困难</span>
        </el-col>
        <el-col :span="6">【标签】：{{ Subject.tags }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】：{{ Subject.subject }}</el-col>
        <el-col :span="6">【目录】：{{ Subject.catalog }}</el-col>
        <el-col :span="6">【方向】：{{ Subject.direction }}</el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col>
          【题干】：
          <span v-html="Subject.question" class="stem"></span>
          <span v-if="Subject.questionType == 1">
            单选题 选项：（以下选中的选项为正确答案）
          </span>
          <span v-else-if="Subject.questionType == 2">
            多选题 选项：（以下选中的选项为正确答案）
          </span>
          <span v-else>简答</span>
          <ul v-if="Subject.questionType == 1 || Subject.questionType == 2">
            <li v-for="(item, index) in result" :key="index">
              <div v-if="Subject.questionType == 1">
                <input
                  type="radio"
                  name="radio"
                  v-if="item.isRight == 1"
                  checked
                />
                <input type="radio" name="radio" v-else />
                {{ item.title }}
              </div>
              <div v-else>
                <input type="checkbox" v-if="item.isRight == 1" checked />
                <input type="checkbox" v-else />
                {{ item.title }}
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col>
          【参考答案】：
          <el-button type="danger" @click="video(Subject)">
            视频答案预览
          </el-button>
          <br />
          <video
            v-if="isVideoShow"
            :src="Subject.videoURL"
            width="500px"
            height="300px"
            controls
          ></video>
        </el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col> 【答案解析】：<span v-html="Subject.answer"></span> </el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col> 【题目备注】：{{ Subject.remarks }} </el-col>
      </el-row>
      <!-- /题目预览主体 -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isSubjectShow = false">
          关 闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import QuestionSelect from '../components/question-select.vue'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
export default {
  name: 'question',
  components: {
    QuestionSelect,
  },
  data() {
    return {
      questionList: [],
      queryinfo: {
        page: 1,
        pagesize: 3,
      },
      total: 0,
      isSubjectShow: false, // 控制题目预览的显示与隐藏
      Subject: {},
      isVideoShow: false,
      result: [],
    }
  },
  created() {
    this.getQuestionList()
  },
  methods: {
    async getQuestionList() {
      console.log('22')
      const { data } = await list(this.queryinfo)
      console.log(data)
      this.questionList = data.items
      this.total = data.counts
    },
    handleSizeChange(newSize) {
      this.queryinfo.pagesize = newSize
      this.getQuestionList()
    },
    handleCurrentChange(newPage) {
      this.queryinfo.page = newPage
      console.log(this.queryinfo)
      this.getQuestionList()
    },
    async SubjectShow(scope_row, id) {
      this.Subject = scope_row
      const { data } = await detail({ id })
      this.result = data.options
      console.log(this.result)
      this.isSubjectShow = true
    },
    video(Subject) {
      if (Subject.videoURL) {
        this.isVideoShow = true
      }
    },
    isSubjectShowClosed() {
      this.isVideoShow = false
    },
    deletequestion(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await remove({ id })
          this.$message.success('删除成功!')
          this.getQuestionList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async search(questionForm) {
      console.log(questionForm)
      this.queryinfo = Object.assign(this.queryinfo, questionForm)
      console.log(this.queryinfo)
      this.getQuestionList()
    },
    // 加入精品
    addSelect(val) {
      this.$confirm('此操作将题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await choiceAdd({ id: val, choiceState: 1 })
          this.$message({
            type: 'success',
            message: '加入精选题库成功!',
          })
          this.$router.push('choice')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //修改试题

    goNew(id) {
      console.log(id)
      this.$router.push({
        path: 'new',
        query: {
          id,
        },
      })
    },
  },
}
</script>

<style scoped lang='less'>
.btnNew {
  text-align: right;
  margin-bottom: 20px;
}

.el-row {
  margin-bottom: 30px;
}

.stem {
  color: blue;
}

.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>